@import "../../commonFunc";

.audio_component_module {
    ul {
        li {
            width: calc((100% / 6) - 16px);
            height: px2rem(124);
            margin: px2rem(8);
            @include position(relative);
            border: 1px solid rgba(175, 137, 98, .6);
            @include bgColor(rgba(255, 255, 255, .4));

            .video_head {
                height: px2rem(86);
                @include displayFlex;
                padding: px2rem(17) px2rem(10);

                audio {
                    display: none;
                }

                > span {
                    @include displayFlex;
                    @include widthHeight(px2rem(40));
                    border: px2rem(3) solid #BD9E7D;
                    border-radius: 50%;
                    margin-right: px2rem(10);
                    cursor: pointer;

                    &.active {
                        .anticon {
                            margin-left: 0;
                        }
                    }

                    .anticon {
                        @include color(#BD9E7D);
                        @include fontSize(px2rem(20));
                        margin-left: px2rem(3);
                    }

                    &:hover {
                        opacity: .8;
                    }
                }

                p {
                    width: calc(100% - 50px);
                    @include visibleFont;
                    @include color(#6E4B30);
                    @include fontSize;
                }
            }

            .video_control {
                @include displayFlex;
                padding: 0 px2rem(10);
                height: px2rem(37);

                .currentTime, .duration {
                    @include fontSize(12);
                    @include color(#6E4B30);
                }

                .slider_progress {
                    width: 80%;
                    height: 100%;
                    padding: 0 px2rem(5);

                    .ant-slider {
                        margin: px2rem(8) 0 0 0;
                        height: px2rem(19);

                        &:before {
                            content: ' ';
                            height: 100%;
                            display: block;
                            @include position;
                            @include trbl(0, 0, 0, 0);
                            background-image: url("../../../images/audio.svg");
                            background-position: left center;
                            background-repeat: no-repeat;
                            background-size: cover;
                        }

                        .ant-slider-rail {
                            height: 100%;
                            @include bgColor(rgba(175, 137, 98, .4));
                            top: 0;
                        }

                        .ant-slider-track {
                            height: 100%;
                            top: 0;
                            @include bgColor($yellowColor !important);
                        }

                        .ant-slider-handle {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}